<template>
  <div
    class="sj-audit"
    @touchmove.prevent="touchmove"
  >
    <div class="card">
      <img
        class="close"
        src="../../assets/image/icon/icon-close.png"
        @click="closeDialog"
      >
      <span class="title">请填写拒绝理由</span>
      <textarea
        id=""
        v-model="reason"
        name=""
        cols="30"
        rows="10"
        placeholder="请输入拒绝理由..."
        maxlength="30"
        @input="reasonInput"
      ></textarea>
      <div class="btn" @click="submitDialog">确定</div>
    </div>

  </div>
</template>

<script>
import vant from 'vant'
export default {
  props: {
    nameStr: {
      type: String,
      default: ''
    },
    canSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      reason: ''
    }
  },
  methods: {
    touchmove(e) { },
    reasonInput(e) {
      this.reason = e.target.value.replace(/\s*/g, '')
    },
    closeDialog() {
      this.$emit('closeDialog', {
        refuse: false
      })
    },
    submitDialog() {
      if (!this.reason) return vant.Toast('拒绝理由不能为空')
      this.$emit('closeDialog', {
        refuse: true,
        reason: this.reason
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sj-audit {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 130px 15px 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.19);

  .card {
    position: relative;
    padding: 20px 15px 24px;
    border-radius: 8px;
    background: #f8f9fa;

    display: flex;
    flex-direction: column;
    align-items: center;

    .close {
      position: absolute;
      right: 15px;
      top: 15px;
      width: 15px;
      height: 14px;
    }
    .title {
      line-height: 21px;
      font-size: 15px;
      color: #141e2a;
    }
    textarea {
      margin-top: 17px;
      padding: 15px;
      width: calc(100% - 30px);
      height: 154px !important;
      line-height: 21px;
      font-size: 15px;
      border-radius: 8px;
      background: #fff;
      border: none;
    }
    .btn {
      margin-top: 16px;
      width: 120px;
      height: 32px;
      font-size: 15px;
      border-radius: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #267eff;
      border: 1px solid #267eff;
    }
  }
}
</style>
